<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="button" value="跳转百度首页" onclick="href()">

    <div name="标签1" id="1">我是div1</div>
    <div name="标签2" id="2">我是div2</div>
    <div name="标签3" id="3">我是div3</div>
    <div name="标签4" id="4">我是div4</div>

    <input type="button" value="将div标签变为蓝色" onclick="DivToBlue()">
    <input type="button" value="删除第一个标签" onclick="removeFirst_Div()">
    <input type="button" value="关闭网页" onclick="close_web()">
    <script>
        /* 
           javascript的3大组成部分
           ECMA Script
 
           BOM
           构成了JS核心的语法基础
           Browser Object Model 浏览器对象模型，用来操作浏览器上的对象
 
           DOM
           Document Object Model 文档对象模型，用来操作网页中的元素（标签） */

        //一.自定义对象
        //(1)初始化定义
        let user = {
            //定义变量  属性名称:属性值
            name: "张三",
            age: 18,
            sex: "female",
            roles: [],
            //定义函数
            add: (x) => {
                user.roles.push(x)
            },

            delete: (x) => {
                user.roles.pop(x)
            }
        }
        user.add(1)
        user.add(2)
        user.add(3)
        console.log(user.roles)

        //(2)创建语法
        let user1 = new Object
        user1.name = "李四"
        user1.age = 20
        console.log(user1.age)

        //(3)构造函数式
        function Phone(name, bus, price){
            this.name = name
            this.bus = bus
            this.price = price

            //类中定义有this指针
            this.add1 = ()=>{
                this.price += 1
            }
        }

        //静态方法没有this指针
        Phone.prototype.add = ()=>{
            console.log("add")
        }

        let ph1 = new Phone("xiaomi", "xiaomi", 20)
        ph1.add1()
        console.log(ph1.price)
        console.log(ph1.name)
        console.log(ph1.bus)        

        //二.BOM(Browser Object Model)
        //操作浏览器对象
        // 1.window对象：Window 对象 表示浏览器窗口对象。属于最大的窗口对象，在js中可以使用window对象调用全局函数，属性以及document history location对象。

        //(1)弹出框
        window.alert("弹出框")

        //(2)确认框
        // let result = window.confirm(确认信息);
        // 说明：
        //     1）确认框具有两个按钮：确定  取消
        //     2）当点击确定按钮，该函数就会返回true
        //     3）当点击取消按钮，该函数就会返回false

        //关闭网页
        let close_web = () => {
            let bool = window.confirm("确定退出吗")
            if (bool) {
                window.close()
            }
            else {
                //无操作
            }
        }

        //(3)信息提示框
        // let result =  window.prompt(提示信息,默认值);
        // 说明：
        //     1）信息提示框具有两个按钮：确定  取消
        //     2）当点击确定按钮，该函数就会返回信息框的值
        //     3）当点击取消按钮，该函数就会返回null
        window.prompt("请输入你的名字", "张三")

        var i = 0
        print1 = () => console.log("每隔1秒出现一次:" + ++i)
        //定时器 
        //(1)setInterval
        //      let timer = window.setInterval(code, millisec) 
        //      按照指定的周期（间隔）来执行函数或代码片段。
        //      参数1： code 必须写。  执行的函数名或执行的代码字符串。 
        //      参数2： millisec 必须写。时间间隔，单位：毫秒。
        let timer = window.setInterval(print1, 1000)
        console.log(timer)

        //(2)setTimeout
        //window.setTimeout(code,millisec)
        //      参数：
        //      code  必需。要调用的函数。 
        //      millisec 必需。在执行代码前需等待的毫秒数。
        //      注意：
        //      该定时器只执行一次
        setTimeout(() => { console.log("5秒到了") }, 5000)


        // 2.location对象：Location 对象包含有关当前 URL 的信息。Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
        // window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
        console.log(window.location.hash)
        console.log(window.location.port)
        console.log(window.location.protocol)
        //可实现重定向
        href = () => {
            window.location.href = "https://www.baidu.com"
        }

        // 3.history对象：History 对象包含用户（在浏览器窗口中）访问过的 URL。 
        // History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问
        //(1).window.history 对象包含浏览器的历史。表示浏览器的历史记录对象。
        //(2).window.history对象在编写时可不使用 window 这个前缀。就是我们在使用的时候可以不写window对象
        //(3).History对象常见的函数：
        //      1.history.back() - 与在浏览器点击后退按钮相同  后退一步         history.go(-1)
        //      2.history.forward() - 与在浏览器中点击按钮向前相同  前进一步    history.go(1)
        //      3.history.go(整数) 如果参数是正整数那么就是前进，如果参数是负整数就是后退。//使用这个
        //      举例：
        //          1  前进一步 2  前进2步。 。。。
        //         -1  后退一步 - 2 后退2步。。。。

        //三.DOM概述理解
        //DOM:document object model 文档对象模型。
        //document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
        // document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
        // document.getElementsByName()	返回带有指定名称的对象集合。
        // document.getElementsByTagName()	返回带有指定标签名的对象集合。
        // 用来操作html页面中所有html标签的。
        // 在使用dom操作html标签之前，浏览器会将html页面中的标签加载到内存中形成一个dom树，上面最大的对象时document。
        // 我们可以通过document调用属性或者函数获取html标签。
        console.log(document)
        // element.getAttribute(属性的名称); 根据标签的属性的名字来获取属性的值
        console.log(document.getElementById("1").getAttribute("name"))  //标签
        // element.setAttribute(属性的名称, 值); 给标签设置一个属性
        // element.removeAttribute(属性的名称); 根据标签的属性的名字来删除属性
        // element.children; 获取当前元素（标签）的子元素注意：获取的子级（一层），不管嵌套(不包括孙子，只包括儿子)
        // element.nodeName / tagName;	获取标签名 注意：获取的是大写的字符串的标签名

        // element.innerHTML; 获取当前元素（标签）的文本内容
        // innerHTML和innerText都是操作标签文本的，但是innerHTML解析html标签的，innerText是不解析html标签的，会原样显示。
        // 建议以后使用innerHTML
        document.getElementById("1").innerText += ' <b>我是加粗</b> '   //<b>我是加粗</b>
        document.getElementById("1").innerHTML += '<b>我是加粗</b>'     //我是加粗

        //将上述标签改为蓝色
        let DivToBlue = () => {
            let DivList = document.getElementsByTagName("div")
            for (let i = 0; i < DivList.length; ++i) {
                DivList[i].style.color = "blue"
            }
        }

        let removeFirst_Div = () => {
            document.getElementById("1").remove()
        }

        
    </script>
</body>

</html>